import { useStore } from 'vuex'
import { computed, watch, ref } from 'vue'
import { getLyric} from "@/service/song";
import Lyric from 'lyric-parser'

export default function useLyric( {songReady,currentTime}) {
  const currentLyric = ref(null)

  const currentLineNum = ref(0)
  const pureMusicLyric = ref('')
  const playingLyric = ref('')
  const lyricScrollRef = ref(null)
  const lyricListRef = ref(null)

  const store = useStore()
  const currentSong = computed(() => {
   return  store.getters.currentSong
  })

  watch(currentSong,async(newSong) => {
    if (!newSong.url || !newSong.id) {
      return
    }
    stopLyric()
    currentLyric.value = null
    currentLineNum.value = 0
    pureMusicLyric.value = ''
    playingLyric.value = ''

    const lyric = await getLyric(newSong)
    store.commit('addSongLyric',{
      song: newSong,
      lyric
    })

    if (currentSong.value.lyric !== lyric) {
      return
    }
    currentLyric.value = new Lyric(lyric,handleLyric)
    const hasLyric = currentLyric.value.lines.length
    if (hasLyric) {
      //默认是false
      playLyric()
      if (songReady.value){


      }

    }else {
      playingLyric.value = pureMusicLyric.value = lyric.replace(/\[(\d{2}):(\d{2}):(\d{2})\]/g, '')
    }

  })

  function playLyric() {
    const currentLyricVal = currentLyric.value
    if (currentLyricVal) {
      currentLyricVal.seek(currentTime.value * 1000)
    }
  }

  function stopLyric() {
    const currentLyricVal = currentLyric.value
    if (currentLyricVal) {
      currentLyricVal.stop()
    }
  }

  function handleLyric ({ lineNum, txt }) {
    currentLineNum.value = lineNum
    playingLyric.value = txt
  }

  return {
    playingLyric,
    playLyric,
    stopLyric,
    currentLyric,
    currentLineNum
  }

}
